<template>
	<view>
		<nav-bar color="#333" bgc="#fff" bbtn>返佣明细</nav-bar>
		<view class="tab">
			<text :class="{'active':activeFlag==0}" @click.stop="pageTab(0)">全部</text>
			<text :class="{'active':activeFlag==1}" @click.stop="pageTab(1)">店铺</text>
			<text :class="{'active':activeFlag==2}" @click.stop="pageTab(2)">团队</text>
		</view>
		<view class="screen">
			<view class="time">2020-04<image src="../../static/logo.png" mode=""></image></view>
			<text :class="{'on':on==1}" @click.stop="statusTab(1)">返佣中</text>
			<text :class="{'on':on==2}" @click.stop="statusTab(2)">已返佣</text>
			<text :class="{'on':on==3}" @click.stop="statusTab(3)">扣返佣</text>
		</view>
		<view class="list">
			<returndetail @returnDetail='goDetails' v-for='(item,index) in allData' :param='item'></returndetail>
			<view class="" v-if="!allData.length">
				暂无明细
			</view>
		</view>
	</view>
</template>

<script>
	import returndetail from '../../components/returnDetail.vue';
	export default {
		components:{
			returndetail
		},
		data() {
			return {
				
				activeFlag:0,
				on:0,
				allData:{},
			}
		},
		methods: {
			pageTab:function(index){
				this.activeFlag = index;
				this.getData()
			},
			statusTab:function(index){
				if(index==this.on){
					this.on = 0; 
				}else{
					this.on = index;
				}
				this.getData()
			},
			getData:function(){
				let _this = this
				let param = {
					"token":this.token,
					"type":this.activeFlag,
					"status":this.on,
					"date":"2020-04"
				}
				this.ajaxJson('getUserRakeBackList',param,function(data){
					console.log(data);
					_this.allData = data
				})
			},
			goDetails:function(data){
				uni.navigateTo({
					url:"../rebateDetails/rebateDetails?id="+data.id
				})
			}
		},
		onLoad:function(){
			this.getData()
		}
	}
</script>

<style scoped>
   *{
   	margin: 0;
   	padding: 0;
   	list-style: none;
   	box-sizing: border-box;
   	font-size: 0.75rem;
   }
   .tab{
	   margin-top: 3.5rem;
	   padding: 0 4%;
   }
   .tab text{
	   margin-right: 1rem;
	   font-size: 1rem;
	   font-weight: bold;
	   display: inline-block;
   }
   .active{
	   color: #FD6431;
   }
   .active::after{
	   display: block;
	   background:#FD6431;
	   width: 80%;
	   height: 0.05rem;
	   content: "";
	   border-bottom: 1px solid #FD6431;
	   border-radius: 0.5rem;
	   position: relative;
	   left: 10%;
	   top: 0.1rem;
   }
   .screen{
	   margin-top: 1.5rem;
	   padding: 0 4%;
   }
   .screen text,.screen view{
	   border: 1px solid #fff;
	   display: inline-block;
	   margin-right: 0.5rem;
	   font-size: 0.8rem;
	   padding: 0.25rem 0.5rem;
	   background-color:#f5f5f5 ;
	   color: #4E5366;
	   border-radius: 100px;
   }
    .screen .on{
	   color: #FD6431;
	   border: #FD6431 1px solid;
	   background-color: #FFFFFF;
   }
   .screen .time{
	   background:-webkit-linear-gradient(left,#FD6431,#FF9972);
	   background:-moz-linear-gradient(left,#FD6431,#FF9972);
	   color: #FFFFFF;
   }
   .time image{
	   width: 0.5rem;
	   height: 0.5rem;
	   margin-left: 0.2rem;
   }
   .list{
	   margin-top: 2rem;
	   padding-bottom: 2rem;
   }
</style>
